<template>
	<view class="head"
		:style="{ height: selectData.navBarHeight ? (selectData.navBarHeight + 'px') : (datas.height + 'rpx'), width: selectData.screenWidth + 'px', backgroundColor: datas.isColor ? datas.color : '' }">
		<view class="head_box_bgImg" v-show="datas.headerisImg">
			<image :src="datas.img" style="width:100%;" mode="widthFix"></image>
		</view>
		<!-- 导航 -->
		<view class="box"
			:style="{ height: datas.isBoxHeightAuto ? 'auto' : selectData.navBarHeight + 'px', width: selectData.screenWidth + 'px', backgroundColor: datas.fullImag ? '' : datas.color }">

			<view
				:style="{ height: (selectData.navBarHeightTitle + selectData.statusBarHeight) + 'px', width: selectData.screenWidth + 'px', backgroundColor: datas.color, position: 'absolute', top: 0, left: 0 }"
				v-if="datas.fullImag"></view>

			<!-- 状态栏 -->
			<view class="null"
				:style="{ height: selectData.statusBarHeight + 'px', width: selectData.screenWidth + 'px' }">
			</view>
			<!-- 导航内容 -->
			<view class="back flex" :class="{ borders: datas.isBorder }"
				:style="{ top: selectData.statusBarHeight + 'px', height: selectData.navBarHeightTitle + 'px' }">
				<view class="back_box_bgImg" v-show="datas.backisImg">
					<image style="width:100%;" :src="datas.img" mode="widthFix"></image>
				</view>
				<view class="back_item">
					<view class="backImg" @click="!datas.noBack ? goBack() : ''">
						<image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/back_w.png"
							mode="aspectFit" v-if="!datas.noBack && datas.backColor == 'white'">
						</image>
						<image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/back.png" mode="aspectFit"
							v-else-if="!datas.noBack">
						</image>
						<view class="icon" v-else></view>
					</view>

					<text class="text ft-32 fw-800" :class="{ 'flex1': !selectData.menuButtonRight }"
						:style="{ color: datas.ftColor || '#333' }">{{ datas.title }}</text>
					<view :style="{ width: (selectData.menuButtonRight ? selectData.menuButtonRight : 40) + 'px' }"
						style="color: aqua;height: 100px;">
					</view>
				</view>
			</view>
			<view class="headerContent" id="headerContent"
				:style="{ top: (datas.fullImag ? '' : selectData.navBarContentTop + 'px'), bottom: (datas.fullImag ? (datas.bottom ? datas.bottom : '0px') : ''), width: selectData.screenWidth + 'px', position: selectData.statusBarHeight ? 'absolute' : 'relative' }">
				<slot name="headerContent"></slot>
			</view>
		</view>
	</view>
</template>

<script setup lang="js">
import { onReady } from '@dcloudio/uni-app';
import {
	ref,
	defineProps,
	watch,
	toRef,
	toRefs,
	reactive,
	nextTick,
	getCurrentInstance,
	onMounted
} from 'vue';
const instance = getCurrentInstance()

let props = defineProps(['datas'])
const {
	datas
} = toRefs(props)
watch(() => datas, (newValue, oldValue) => {
}, {
	immediate: true,
	deep: true
})
onMounted(() => {
	console.log('我是ordre')
	// APP端逻辑
	// #ifdef APP-PLUS
	// App端：状态栏高度 + 标题栏高度（iOS:44px, Android:48px）

	nextTick(() => {
		let contentH = 0

		const dpr = uni.getSystemInfoSync().pixelRatio
		query.select('#headerContent').boundingClientRect(data => {
			contentH = Math.round(data.height * dpr) / dpr || 0
			console.log('data.height', data.height, contentH)
			const systemInfo = uni.getSystemInfoSync()
			let statusBarHeight = systemInfo.statusBarHeight
			let screenWidth = systemInfo.screenWidth


			let navHeight = statusBarHeight * 2
			// let headHeight = navHeight
			// if (datas.value.fullImag) headHeight = parseFloat(screenWidth * aspectRatio.value) / 100

			let navBarHeight = Number(navHeight + statusBarHeight + contentH);//导航总高
			if (datas.value.fullImag) {
				if (!datas.value.coverImag) {
					navBarHeight = Number(datas.value.imgHeight * screenWidth / 750)
				} else {
					navBarHeight = Number(datas.value.imgHeight * screenWidth / 750 + contentH);
				}
			}

			selectData.value = {
				// headHeight: headHeight,
				screenWidth: screenWidth,
				statusBarHeight: statusBarHeight,
				navBarHeight: props.datas.isBorder ? parseInt(navBarHeight + 1) : navBarHeight,//导航总高
				navBarContentTop: navHeight + statusBarHeight,//导航文插槽距离顶部距离
				navBarHeightTitle: navHeight,//导航文字模块总高
				capsuleSpace: systemInfo.screenWidth,
				menuButtonRight: 0,

			}
			console.log('selectData.value', selectData.value)

		}).exec();


	})

	// #endif
})
// 返回键
const goBack = () => {
	let pages = getCurrentPages();
	if (pages.length > 1) {
		uni.navigateBack(-1)
	} else {
		wx.reLaunch({
			url: '/pages/index/index',
		})
	}
}

let selectData = ref({})
let aspectRatio = ref(0)
const query = uni.createSelectorQuery().in(instance);
const getImageInfoSync = (src) => {
	return new Promise((resolve, reject) => {
		uni.getImageInfo({
			src: datas.value.img,
			success: (res) => resolve(res),
			fail: (err) => reject(err)
		});
	})
}

onReady(async () => {


	// #ifdef MP
	console.log('我是控制台')
	setTimeout(() => {

		nextTick(() => {

			let contentH = 0

			const dpr = uni.getSystemInfoSync().pixelRatio
			query.select('#headerContent').boundingClientRect(data => {
				contentH = Math.round(data.height * dpr) / dpr || 0

				const systemInfo = uni.getSystemInfoSync()
				let statusBarHeight = systemInfo.statusBarHeight
				let screenWidth = systemInfo.screenWidth
				let menuButtonInfo = 0

				menuButtonInfo = wx.getMenuButtonBoundingClientRect();

				let navHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
				// let headHeight = navHeight
				// if (datas.value.fullImag) headHeight = parseFloat(screenWidth * aspectRatio.value) / 100

				let navBarHeight = Number(navHeight + statusBarHeight + contentH);//导航总高
				if (datas.value.fullImag) {
					if (!datas.value.coverImag) {
						navBarHeight = Number(datas.value.imgHeight * screenWidth / 750)
					} else {
						navBarHeight = Number(datas.value.imgHeight * screenWidth / 750 + contentH);
					}
				}

				selectData.value = {
					// headHeight: headHeight,
					screenWidth: screenWidth,
					statusBarHeight: statusBarHeight,
					navBarHeight: props.datas.isBorder ? parseInt(navBarHeight + 1) : navBarHeight,//导航总高
					navBarContentTop: navHeight + statusBarHeight,//导航文插槽距离顶部距离
					navBarHeightTitle: navHeight,//导航文字模块总高
					capsuleSpace: systemInfo.screenWidth - menuButtonInfo.right + 6,
					menuButtonRight: (screenWidth - menuButtonInfo.right) + menuButtonInfo.width,

				}


			}).exec();


		})
	}, 50);
	// #endif
})



</script>

<style lang="scss" scoped>
.flex1{
	flex: 1;
	text-align: center;
}
.head {
	// position: relative;
	// height: 764rpx;
	// background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/shareHead.png");

	background-size: 100% 100%;
	width: 100%;
	left: 0;
	top: 0;
	position: relative;
	overflow: hidden;


	.head_box_bgImg {
		width: 100%;
		height: calc(100% - 2rpx);
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		// background-color: red;
		object-fit: cover;
		/* 或使用contain */
	}

	.back_box_bgImg {
		width: 100%;
		height: calc(100% - 2rpx);
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		// background-color: red;
		object-fit: cover;
		/* 或使用contain */
	}

	.null {
		width: 100%;
		// height: 88rpx;
		// background-color: red;
	}

	.borders {
		border-bottom: 2rpx solid #F1F1F1;
		// border-bottom: 2rpx solid red;
	}

	.box {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		// background: image('https://cdn.oss.bon-top.cn/static_bc/images/head_bg.png');
		overflow: hidden;
		width: 100vw;
		height: fit-content;
	}

	.back {
		height: 88rpx;
		width: 100%;

		&_item {
			// height: 88rpx;
			// margin-top: 88rpx;
			position: absolute;
			width: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			overflow: hidden;

			.backImg {
				width: 60rpx;
				// background: red;
				margin-right: auto;
				margin-left: 16rpx;
				text-align: center;

			}

			.text {
				width: 366rpx;
				text-align: center;
				// background: red;

			}
		}

		.icon {
			width: 28rpx;
			height: 48rpx;
		}
	}

	.headerContent {
		position: absolute;
		box-sizing: border-box;
		// z-index: -1;
	}

}
</style>